<script setup lang="ts" name="cp-radio-btn">
defineProps<{
    // 选项数据源
    options: {
        // 选项名称
        label: string
        // 选项值
        value: string | number
    }[]
    // 默认值
    modelValue?: string | number
}>()
const emit = defineEmits<{
    (e: 'update:modelValue', v: string | number) : void
}>()
// 修改选中的值
const changeDefault = (v:string | number) => emit('update:modelValue', v)
</script>

<template>
    <div class="cp-radio-btn">
        <a class="item" :class="{ active: modelValue === i.value }" v-for="(i, index) in options" :key="index" href="javascript:;" @click="changeDefault(i.value)">{{ i.label }}</a>
    </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
    display: flex;
    flex-wrap: wrap;

    .item {
        height: 32px;
        min-width: 60px;
        line-height: 30px;
        padding: 0 14px;
        text-align: center;
        border: 1px solid var(--cp-bg);
        background-color: var(--cp-bg);
        margin-right: 10px;
        box-sizing: border-box;
        color: var(--cp-text2);
        margin-bottom: 10px;
        border-radius: 4px;
        transition: all 0.3s;

        &.active {
            border-color: var(--cp-primary);
            background-color: var(--cp-plain);
        }
    }
}
</style>
